<template>
  <div class="game_page gl_scrollbar">
    <!-- 组委会 -->
    <div class="gl_clear">
      <div class="committee_info gl_fl">
        <header class="game_modal_header">组委会</header>
        <div style="padding-left: 40px;box-sizing: border-box;">
          <div class="committee_content modal_shadow">
            <div v-if="trainInfo.committee && trainInfo.committee.content" class="committee_list">
              <div class="committee_item">
                <!-- <div class="title">{{ item.name }}</div> -->
                <div class="committee_item_content">
                  <!-- <span class="committee_name">{{ trainInfo.committee.content }} {{ committeeContent }}</span> -->
                  <div v-for="(item, index) in committeeContent" :key="index" class="committee_name">{{ item }}</div>
                </div>
              </div>
            </div>
            <div v-else class="no_data">暂无组委会相关信息</div>
          </div>
        </div>
      </div>
      <!-- 报名倒计时 -->
      <div class="entry_info gl_fl">
        <header class="game_modal_header">{{ entryTitle }}</header>
        <div style="padding-right: 40px;">
          <div class="entry_countdown modal_shadow">
            <count-down :deadline="deadline" @countDownEnd="countDownEnd" />
          </div>
        </div>
      </div>
    </div>

    <!-- 日程安排 -->
    <div v-show="trainInfo.schedules && trainInfo.schedules.length" class="category_info">
      <header class="game_modal_header">日程安排</header>
      <div style="padding-left: 40px;padding-right: 40px;box-sizing: border-box;">
        <div class="schedule_content modal_shadow gl_mb_10">
          <el-row :gutter="32" class="schedule_title">
            <el-col :span="7">时间</el-col>
            <el-col :span="5">事件</el-col>
            <el-col :span="7">地点</el-col>
            <el-col :span="5">备注</el-col>
          </el-row>
          <el-row v-for="(item, index) in trainInfo.schedules" :key="index" :gutter="32" class="schedule_list">
            <el-col :span="7">
              {{ item.startTime ? item.startTime.slice(0, 10) : '' }}
              {{ item.startTime ? item.startTime.slice(11, 16) : '' }}
              至
              {{ item.endTime ? item.endTime.slice(0, 10) : '' }}
              {{ item.endTime ? item.endTime.slice(11, 16) : '' }}
            </el-col>
            <el-col :span="5" :title="item.title" class="gl_ellipsis">{{ item.title }}</el-col>
            <el-col :span="7" :title="item.location" class="gl_ellipsis">{{ item.location }}</el-col>
            <el-col :span="5" :title="item.comment" class="gl_ellipsis">{{ item.comment }}</el-col>
          </el-row>
        </div>
      </div>
    </div>

    <!-- 科目 -->
    <div v-show="hasSubject" class="category_info">
      <header class="game_modal_header">培训考试内容</header>
      <template v-if="subjectIsEmpty">
        <template v-for="(item, index) in subjectList">
          <div v-if="item.list.length" :key="index" class="category_item modal_shadow gl_mb_10" :class="!item.fold ? 'active' : ''">
            <div class="category_title" @click="toggleFold(item)">
              <div>
                <img class="category_icon" :src="category_icon" alt="">
                <span class="category_name gl_ellipsis">{{ item.name }}</span>
              </div>
              <div>
                <span class="fold_name">{{ item.fold ? '展开' : '收起' }}</span>
                <img class="fold_icon" :class="!item.fold ? 'active' : ''" :src="fold_icon" alt="">
              </div>
            </div>
            <div class="category_content" :class="item.fold ? 'height_0' : ''">
              <div class="line" />
              <div class="event_group">
                <el-row class="event_content" :gutter="10">
                  <el-col v-for="(jtem, jndex) in item.list" :key="jndex" style="margin-bottom: 24px" class="gl_ellipsis" :span="8" :title="jtem.name">
                    <i style="color: #31456C: font-size: 12px;" class="el-icon-caret-right" />
                    {{ jtem.name }}
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
        </template>
      </template>
      <div v-else class="modal_shadow no_data">暂无竞赛项目</div>
    </div>
  </div>
</template>

<script>
import category_icon from '@/assets/images/category_icon.png';
import fold_icon from '@/assets/images/fold_icon.png';
import countDown from '@/plugin/countDown/index.vue';

import {
  api_GET_TrainSubject // 获取科目列表
} from '@/extend/api/trainswaggerApi/app.js';

export default {
  components: {
    countDown
  },
  props: {
    // 传入的个人信息数据
    trainInfo: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data () {
    return {
      category_icon: category_icon,
      fold_icon: fold_icon,
      subjectIsEmpty: true,
      subjectList: {},
      /* === 倒计时相关 === */
      entryTitle: '',
      countDownTimer: null,
      // 倒计时数据
      countDownData: {
        day: 0,
        hours: 0,
        minutes: 0
      },
      // 倒计时状态列表
      countdownStatusList: [
        {
          code: 'entryStartTime',
          name: '报名开始'
        },
        {
          code: 'entryEndTime',
          name: '报名结束'
        }
      ],
      // 倒计时是否已经进行到最后
      countdownIsEnd: false,
      deadline: '1990-01-01 00:00:00',
      committeeLoading: false
    };
  },
  computed: {
    hasSubject () {
      if (this.subjectList.train || this.subjectList.exam) {
        if (this.subjectList.train.list.length || this.subjectList.exam.list.length) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    committeeContent () {
      const _str = (this.trainInfo.committee && this.trainInfo.committee.content) || '';
      const _str1 = _str.split('\n');
      return _str1;
    }
  },
  watch: {
    trainInfo: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.id) {
          this.getSubject({
            trainningId: this.trainInfo.id
          });
        }
      }
    }
  },
  methods: {
    // 倒计时结束
    countDownEnd() {
      if (this.countdownIsEnd) return;
      this.setEntryCountdown();
    },
    // 设置报名倒计时 - 报名开始倒计时、报名结束倒计时、报名结束
    setEntryCountdown() {
      if (JSON.stringify(this.trainInfo) === '{}') return;
      this.initCountdownStatusList();
      this.calcCountdownStatus();
    },
    // 初始化倒计时状态列表
    initCountdownStatusList() {
      this.countdownStatusList.map(item => {
        item.data = this.trainInfo[item.code];
      });
    },
    // 计算当前倒计时状态
    calcCountdownStatus() {
      this.countdownIsEnd = false;
      for (let i = 0; i < this.countdownStatusList.length; i++) {
        const item = this.countdownStatusList[i];
        if (!this.compareNowDate(item.data)) {
          this.entryTitle = item.name + '倒计时';
          if (this.entryTitle === '报名开始倒计时') {
            this.deadline = item.data.substring(0, 10) + ' 00:00:00';
          } else {
            this.deadline = item.data.substring(0, 10) + ' 23:59:59';
          }
          return;
        }
      }
      this.entryTitle = this.countdownStatusList.length && this.countdownStatusList[this.countdownStatusList.length - 1].name + '倒计时' || '倒计时';
      this.deadline = this.countdownStatusList[this.countdownStatusList.length - 1].data.substring(0, 10) + ' 23:59:59';
      console.log(this.entryTitle);
      this.countdownIsEnd = true;
    },
    // 与当前时间进行比较计算
    compareNowDate(date) {
      if (!date) return false;
      const nowTimeStamp = new Date().getTime();
      const time = new Date(date).getTime();
      const timeStampDiff = time - nowTimeStamp;
      // 如果时间差小于0 （传入时间小于当前时间）- 开始进行倒计时
      if (timeStampDiff > 0) {
        return false;
      }
      return true;
    },
    // 获取页面数据
    getSubject (qo) {
      api_GET_TrainSubject(qo)
        .then(
          res => {
            this.subjectIsEmpty = res.trainSubjects.length || res.examSubjects.length;
            this.subjectList = {
              train: {
                fold: true,
                name: '培训',
                list: res.trainSubjects || []
              },
              exam: {
                fold: true,
                name: '考试',
                list: res.examSubjects || []
              }
            };
          }
        );
    },
    toggleFold(item) {
      item.fold = !item.fold;
    }
  }
};
</script>

<style lang="scss" scoped>
  .schedule_content {
    width: 100%;
    padding: 20px 34px 34px ;
    box-sizing: border-box;
  }
  .schedule_title {
    padding-bottom: 6px;
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #646464;
  }
  .schedule_list{
    line-height: 20px;
    opacity: 1;
    font-size: 14px;
    font-weight: 500;
    font-weight: bolder;
    color: #353434;
  }

  .game_page {
    position: relative;
    min-height: 572px;
    padding: 20px 32px;
  }

  .modal_shadow {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
  }
  .game_modal_header {
    position: relative;
    box-sizing: border-box;
    height: 40px;
    padding-left: 20px;
    margin-bottom: 14px;
    line-height: 40px;
    color: #353434;
    font-weight: bold;
    font-size: 20px;
  }
  .game_modal_header::after {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 40px;
    background-color: #E02020;
    border-radius: 4px;
    content: "";
  }
  .committee_info {
    width: calc(100% - 504px - 58px);
    margin-right: 18px;
  }
  .entry_info .entry_countdown {
    width: 504px;
    height: 178px;
    padding: 40px 30px;
    box-sizing: border-box;
  }
  .committee_content {
    width: 100%;
    height: 178px;
    overflow-y: auto;
    padding: 20px 20px;
    box-sizing: border-box;
  }
  .committee_item {
    overflow: hidden;
    margin-bottom: 8px;
  }
  .committee_item:last-child {
    margin-bottom: 0;
  }
  .committee_item .title {
    float: left;
    width: 70px;
    font-size: 16px;
    color: #646464;
    text-align: right;
    margin-right: 28px;
  }
  .committee_item .committee_item_content {
    float: left;
    // width: calc(100% - 98px);
    color: #353434;
  }
  .committee_item_content .committee_name {
    margin-right: 20px;
  }
  .category_info {
    margin-top: 20px;
  }
  .category_item {
    border: 2px solid transparent;
    transition: all 0.3s ease;
    overflow: hidden;
  }
  .category_item:hover,
  .category_item.active {
    border-color: #31456c;
  }
  .category_item .category_title {
    display: flex;
    width: 100%;
    height: 56px;
    line-height: 56px;
    padding: 0 30px;
    box-sizing: border-box;
    cursor: pointer;
    justify-content: space-between;
  }
  .category_item .category_icon {
    width: 40px;
    height: 40px;
    margin-right: 15px;
    vertical-align: middle;
  }
  .category_item .category_name {
    display: inline-block;
    width: 900px;
    vertical-align: middle;
  }
  .category_item .fold_name {
    display: inline-block;
    padding: 0 7px;
    color: #dc1d1d;
    font-weight: bold;
    text-shadow: 0px 10px 30px 0px rgba(0,0,0,0.10);
    vertical-align: middle;
  }
  .category_item .fold_icon {
    vertical-align: middle;
    transition: all 0.3s ease;
  }
  .category_item .fold_icon.active {
    transform: rotate(-180deg);
  }
  .category_content {
    margin: 0 20px;
    height: auto;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .category_content.height_0 {
    height: 0;
  }
  .category_content .line {
    width: 100%;
    height: 2px;
    background: #31456C;
  }
  .event_group {
    padding: 20px 10px 20px;
  }

  .event_content {
    line-height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #353434;
  }
</style>
